<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>dataList</view>
				<view>Array, String, Object</view>
				<view>无</view>
				<view>图组数据集，格式为对象数组，包含image：图片地址；title：标题；describe：图片描述。单张图片可只填图片地址，或单个对象数据</view>
			</view>
			<view class="tr">
				<view>index</view>
				<view>Number</view>
				<view>0</view>
				<view>图组默认展示第几张图片，格式为数组下标</view>
			</view>
			<view class="tr">
				<view>autoplay</view>
				<view>Boolean</view>
				<view>true</view>
				<view>图组自动播放开关</view>
			</view>
			<view class="tr">
				<view>interval</view>
				<view>Number</view>
				<view>5000</view>
				<view>自动切换时间间隔，播放时有效</view>
			</view>
			<view class="tr">
				<view>duration</view>
				<view>Number</view>
				<view>500</view>
				<view>滑动动画时长，播放时有效</view>
			</view>
			<view class="tr">
				<view>circular</view>
				<view>Boolean</view>
				<view>true</view>
				<view>循环预览开关</view>
			</view>
			<view class="tr">
				<view>buttonSize</view>
				<view>String</view>
				<view>32rpx</view>
				<view>工具条按钮大小，需带单位</view>
			</view>
			<view class="tr">
				<view>imgMode</view>
				<view>Boolean</view>
				<view>aspectFit</view>
				<view>图片裁剪、缩放的模式，同uniapp的imge组件mode属性 </view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>Number, String</view>
				<view>400</view>
				<view>图组图片框高度，可带单位，必须设置</view>
			</view>
			<view class="tr">
				<view>titleClass</view>
				<view>String</view>
				<view>fontSize-lg</view>
				<view>图片标题栏样式名，只对全局样式或穿透样式有效 </view>
			</view>
			<view class="tr">
				<view>titleFontSize</view>
				<view>Number, String</view>
				<view>0</view>
				<view>图片标题字体大小，可带单位。设置后会覆盖类名样式</view>
			</view>
			<view class="tr">
				<view>desClass</view>
				<view>String</view>
				<view>fontSize-sm</view>
				<view>图片描述栏样式名，只对全局样式或穿透样式有效 </view>
			</view>
			<view class="tr">
				<view>desFontSize</view>
				<view>Number, String</view>
				<view>0</view>
				<view>图片描述字体大小，可带单位。设置后会覆盖类名样式</view>
			</view>
			<view class="tr">
				<view>desTrigger</view>
				<view>Number</view>
				<view>30</view>
				<view>图片描述下拉打开关闭的触点滑动触发距离</view>
			</view>
			<view class="tr">
				<view>useEnlarge</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用图片放大器，点击图片后进入放大器</view>
			</view>
			<view class="tr">
				<view>enlargeSet</view>
				<view>Object</view>
				<view>无</view>
				<view>图片放大器配置参数，参照图片放大器说明。格式：{ 参数名: 参数值, …… }</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>prev：icon-prev 上一页</view>
					<view>next：icon-next 下一页</view>
					<view>down：icon-arr-down 展开</view>
				</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>图集翻页事件，提交当前页数组下标</view>
			</view>
			<view class="tr">
				<view>@close</view>
				<view>事件</view>
				<view>	</view>
				<view>图片预览器关闭事件，无提交参数</view>
			</view>
			<view class="tr">
				<view>@enlargeClose</view>
				<view>事件</view>
				<view>	</view>
				<view>图片放大器关闭事件，提交当前页数组下标</view>
			</view>
			<view class="tr">
				<view>@click</view>
				<view>事件</view>
				<view>	</view>
				<view>图片放大器内图片点击事件，提交当前页数组下标</view>
			</view>
			<view class="tr">
				<view>@eventLongPress</view>
				<view>事件</view>
				<view>	</view>
				<view>图片放大器图片长按事件，提交当前页数组下标</view>
			</view>
			<view class="tr">
				<view>@event</view>
				<view>事件</view>
				<view>	</view>
				<view>图片放大器内自定义按钮点击事件，提交对象参数，包含index：当前页数组下标；image：图片地址；title：图片标题；describe：图片描述；params：自定义参数传递</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：
				<view class="mb-sm">
					{{"&lt;vi-image-viewer ref='组件id' :dataList='图片数据集'>&lt;/vi-image-viewer>"}}
				</view>
				使用refs调用组件的open方法打开
			</view>
			<view class="py-sm">
				<vi-image-viewer ref="demo1" :dataList="dataList"></vi-image-viewer>
				<vi-button @click="openWin('demo1')">默认示例</vi-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					{
						image:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqq.yh31.com%2Ftp%2Ffj%2F202108070936229961.jpg&refer=http%3A%2F%2Fqq.yh31.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644541056&t=6e0b80671e1bc2661056535b90a9895a",
						describe:'<p class="indent2">这是带结构的描述1</p><p class="indent2">这是带结构的描述1</p>',
						title:"图片1标题"
					},
					{
						image:"https://img2.baidu.com/it/u=617579813,2960860841&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
						describe:'<p class="indent2">这是带结构的描述2</p><p class="indent2">这是带结构的描述2</p>',
						title:"图片2标题"
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
